<template>
  <!-- 活动列表 -->
  <div class="messageList">
    <MyHead title="活动资讯"></MyHead>
    <div style="background-color: #f9f9f9">
      <van-tabs
        v-model="activeName"
        background="#FFEBEB"
        title-active-color="#F57373"
        @change="tabsClick"
        sticky
      >
        <!-- 热门资讯 -->
        <van-tab title="热门资讯" name="a" style="padding-bottom: 50px">
          <div class="list-box" v-if="hotlList.length > 0">
            <load-more :loadmoredata="loadmoredata" @refresh="refreshhotlist" v-if="activeName=='a'">
              <hot-meaasge :list="hotlList"></hot-meaasge>
            </load-more>
          </div>
          <div v-else>
            <van-empty description="暂无资讯" />
          </div>
        </van-tab>
        <!-- 地区资讯 -->
        <van-tab
          title="地区资讯"
          name="b"
          class="tab-style">
          <div class="allregions">
            <div class="school-name " @click="goDistrict"> 查看所有地区疾控单位>></div>
          </div>
          <div class="district-box" v-if="hotlList.length > 0">
            <load-more :loadmoredata="loadmoredata" @refresh="refreshhotlist" v-if="activeName=='b'">
            <div
              class="item-box flexb" v-for="(item, index) in hotlList" :key="index"  @click="goDistrictMessage(item)">
              <div class="left-box">
                <div class="title-box"> {{ item.title }}</div>
                <div>{{ item.introduce }}</div>
              </div>
              <div class="right-box">
                <van-button round type="info" color="#F57373">查看</van-button>
              </div>
            </div>
            </load-more>
          </div>
          <div v-else>
            <van-empty description="暂无资讯" />
          </div>
        </van-tab>
        <!-- 校园资讯 -->
        <van-tab
          title="校园资讯"
          name="c"
          class="tab-style"
         >
          <div class="allregions flexb" >
            <div class="school-name flexc" @click="goAllSchool">查看所有高校>></div>
            <div class="btn-style"><van-button color="#FFA32B" size="small" @click="goMySchool">我的学校</van-button></div>
          </div>
          <div class="district-box" v-if="hotlList.length > 0">
            <load-more :loadmoredata="loadmoredata" @refresh="refreshhotlist" v-if="activeName=='c'">
            <div
              class="item-box" v-for="(item, index) in hotlList" :key="index" @click="campusMessage(item)">
              <div class="left-box">
                <div class="title-box"> {{ item.title }}</div>
                <div>{{ item.introduce }}</div>
              </div>
              <div class="right-box">
                <van-button round type="info" color="#F57373">查看</van-button>
              </div>
            </div>
          </load-more>
          </div>
          <div v-else>
            <van-empty description="暂无资讯" />
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <MyTab></MyTab>
  </div>
</template>
<script>
import { sourceURL } from "../../api/request";
import HotMeaasge from "./HotMeaasge";
export default {
  components: { HotMeaasge },
  data() {
    return {
      openid: $.cookie("openid"),
      activeName: "a",
      type:"1",   // 1省疾控 2市区疾控 4学校疾控
      hotlList: [], //热门
      districtList: [],  // 地区
      campusList: [], //学校
      params: {//热门
        page: 1,
        limit: 8,
        total:0,
      },
    };
  },
  computed: {},
  methods: {
    /*我的学校*/ 
    async goMySchool(){
      let res = await this.$ajax.getPersoninfo({
        openid: this.openid,
      });
      if (res.code == 1) {
        this.changeUserInfo(res.data);
        this.$router.push({name:'schoolindex',query:{depart_code:this.userInfo.depart_code,name:this.userInfo.name}});
      }
    },
    /*查看所有地区疾控单位*/
    goDistrict() {
      this.$router.push({ name: "jKongList" });
    },
    /*查看所有高校*/
    goAllSchool() {
      this.$router.push({ name: "schoolList" });
    },
    /*地区资讯（查看）*/
    goDistrictMessage(item) {
      this.$router.push({ name: "messageDetail", query: { id: item.id } });
    },
    /*校园资讯(查看)*/
    campusMessage(item) {
      this.$router.push({ name: "messageDetail", query: { id: item.id } });
    },
    /*资讯列表(热门)*/
    async getInformations() {
      let res = await this.$ajax.informationsList({
        openid: this.openid,
        type:this.type,
        ...this.params
      });
      if (res.code == 1) {
        this.hotlList = res.data.data; //热门资讯
        this.$set(this.params,'total',res.data.total);
      } 
    },
    refreshhotlist(){
      this.params.page = 1; //
      this.getInformations();
    },
    /*热门分页*/
    async loadmoredata(loaddata,nodata){
      this.params.page+=1; // 
      if(this.params.page > Math.ceil(this.params.total / this.params.limit)){
        nodata();
      }else{
        let res = await this.$ajax.informationsList({
          openid: this.openid,
          type: this.type,
          ...this.params,
        });
          if (res.code == 1) {
            loaddata();
            this.hotlList = this.hotlList.concat(res.data.data); //热门资讯
          } 
        }
    },

    /*地区资讯（列表）*/
    async getDistrictMessage() {
      let res = await this.$ajax.informationsList({
        openid: this.openid,
        type: 2,
      });
      if (res.code == 1) {
        this.districtList = res.data.data; //地区资讯
      } 
    },
    /*学校资讯（列表）*/
    async getSchoolMessage() {
      let res = await this.$ajax.informationsList({
        openid: this.openid,
        type: 4,
      });
      if (res.code == 1) {
        this.campusList = res.data.data; //校园资讯
      }
    },
    /*tab切换数据列表*/
    tabsClick(index) {
      // 热门资讯
      this.params.page = 1; // 每次 切换页面 从第一页开始
      if (index == "a") {
        this.type = '1';
      } else if (index == "b") {
        this.type = '2';
      } else if (index == "c") {
        this.type = '4';
      }
      this.getInformations();
    },
    /*确定提交*/
    // async onSubmit() {
    //   if (this.form.depart_code && this.form.grade && this.form.gender) {
    //     let res = await this.$ajax.Register({
    //       depart_code: this.form.depart_code,
    //       grade: this.form.grade,
    //       gender: this.form.gender,
    //       openid: this.openid,
    //     });
    //     if (res.code == 1) {

    //       this.$toast(res.msg);
    //       setTimeout(() => {
    //         this.infoShow = false;
    //       }, 500);
    //     } else {
    //       this.$toast(res.msg);
    //     }
    //     console.log(this.form, "注册数据");
    //   } else {
    //     this.$toast("请输入完整的信息");
    //   }
    // },
    /*关闭*/
    close() {
      this.infoShow = false;
    },
  },
  mounted() {
    this.getInformations();
  },
};
</script>
    
<style lang="scss" scoped>
.tab-style{
  background-color: #f9f9f9; 
  padding-bottom: 50px;
}
.messageList {
  background-color: #f8f8f8;
  min-height: 100vh;
  height: 100%;
  // 热门
  .list-box {
    margin-top: 15px;

    .item-box {
      display: flex;
      align-items: center;
      width: 95%;
      line-height: 20px;
      border-radius: 6px;
      background-color: rgba(255, 255, 255, 1);
      margin: 17px 8px;
      padding: 10px 12px;
      box-sizing: border-box;
      .img-box {
        width: 100px;
        height: 93px;
        overflow: hidden; /* 隐藏超出容器的部分 */
        img {
          width: 100%;
          height: 100%;
          object-fit: cover; /* 等比例缩放并裁剪，保持图片不变形 */
        }
      }
      .right-box {
        margin-left: 15px;
        .title {
          color: rgba(16, 16, 16, 1);
          font-size: 14px;
          text-align: left;
          font-family: SourceHanSansSC-regular;
          font-weight: bold;
        }

        .introduce-style {
          color: rgba(153, 153, 153, 1);
          font-size: 12px;
          text-align: left;
          font-family: PingFangSC-regular;
        }
      }
    }
  }
  .allregions {
    font-size: 12px;
    padding: 13px 0px 0px 11px;
    .school-name{
      color: rgba(64, 149, 229, 1);
      text-align: left;
      font-family: SourceHanSansSC-regular;
    }
    .btn-style{
      margin-right: 10px;
    }
  }
  .district-box {
    .item-box {
      align-items: center;
      width: 95%;
      line-height: 20px;
      border-radius: 6px;
      background-color: rgba(255, 255, 255, 1);
      margin: 17px 8px;
      padding: 10px 12px;
      box-sizing: border-box;
      .left-box {
        color: rgba(153, 153, 153, 1);
        font-size: 12px;
        font-family: SourceHanSansSC-regular;
        line-height: 25px;
        .title-box {
          color: rgba(16, 16, 16, 1);
          font-size: 14px;
          text-align: left;
          font-family: SourceHanSansSC-regular;
          font-weight: bold;
        }
      }
      .right-box {
        display: flex;
        justify-content: right;
        align-items: center;
        margin-left: 10px;
        .van-button {
          width: 80px;
          height: 30px;
          border-radius: 42px;
          background-color: rgba(255, 163, 43, 1);
          color: rgba(255, 255, 255, 1);
          font-size: 12px;
          text-align: center;
          font-family: Microsoft Yahei;
          border: none;
        }
      }
    }
  }
}
</style>